import './ConvenientOperation.scss'
import { v4 } from 'uuid'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { message, Input, Select, Button } from 'antd'
import { MinusCircleOutlined } from '@ant-design/icons'

import { Http } from '../../../Api'
import { HomeNav } from '../../../../Pages/Front/jtgj/Data'

export const ConvenientOperation = () => {
    const [messageApi, contextHolder] = message.useMessage()
    const nav = HomeNav.map(item => item.child)
        .flat()
        .filter(v => v !== undefined)
    const navMapping = [{ title: '首页', path: '/Front' }, ...nav].map(({ title, path }) => ({
        value: path,
        label: `路由 - ${title}`,
    }))

    const [Data, setData] = useState([])
    const { runAsync: posJson } = useRequest(Http, { manual: true, onSuccess: () => messageApi.info('数据已更新!') })

    const { runAsync: getJson } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res) setData(res)
            else
                posJson({
                    url: 'posSaveJsonInfoByUuid',
                    data: JSON.stringify(JSON.stringify(Data)),
                    path: ['VoiceJson'],
                })
        },
    })

    useMount(() => {
        getJson({ url: 'getJsonInfoByUuid', data: { uuid: 'VoiceJson' } })
    })

    const Options = [
        ...navMapping,
        { value: 'A01', label: '弹窗 - 预警视频' },
        { value: 'A02', label: '弹窗 - 公司简介' },
        { value: 'A03', label: '弹窗 - 权属企业' },
        { value: 'A04', label: '弹窗 - 在建项目' },
        { value: 'A05', label: '弹窗 - 在册员工' },
    ]

    const NavTop = [
        { uuid: 1, title: '语音指令' },
        { uuid: 2, title: '快捷键' },
        { uuid: 3, title: '操作命令' },
    ]

    const onAdd = () => {
        setData([...Data, { uuid: v4(), voice: '', keys: '', mapping: '' }])
    }
    const onDel = uuid => {
        const data = Data.filter(v => v.uuid !== uuid)
        setData(data)
    }

    const onSave = () => {
        posJson({ url: 'posSaveJsonInfoByUuid', data: JSON.stringify(JSON.stringify(Data)), path: ['VoiceJson'] })
    }

    return (
        <div className="ConvenientOperation">
            {contextHolder}
            <div className="Top">
                {NavTop.map(({ uuid, title }) => (
                    <div key={uuid}>{title}</div>
                ))}
            </div>
            <div className="List">
                {Data.map(({ uuid, voice, keys, mapping }) => (
                    <div key={uuid}>
                        <Input
                            value={voice}
                            placeholder="请输入语音指令"
                            onChange={e => {
                                Data.find(v => v.uuid === uuid).voice = e.target.value
                                setData([...Data])
                            }}
                        />
                        <Input
                            value={keys}
                            placeholder="请绑定快捷键"
                            onChange={e => {
                                Data.find(v => v.uuid === uuid).keys = e.target.value
                                setData([...Data])
                            }}
                        />
                        <Select
                            value={mapping}
                            options={Options}
                            placeholder="请选择执行功能"
                            onChange={e => {
                                Data.find(v => v.uuid === uuid).mapping = e
                                setData([...Data])
                            }}
                        />
                        <MinusCircleOutlined className="onDelete" onClick={() => onDel(uuid)} />
                    </div>
                ))}
            </div>
            <div className="Add">
                <Button block type="dashed" onClick={onAdd}>
                    添加
                </Button>
                <Button block type="primary" onClick={onSave}>
                    保存
                </Button>
            </div>
        </div>
    )
}
